<template>
<div class="top">
     <img src="//ms0.meituan.net/touch/img/download_banner.png" class="img-box">
        <div class="nav-bar">
            
                <ul class="toplist">
                    <li class="list">
                       <a class="react" href="">美发</a>
                        <span class="iconfont xiala2">&#xe61e;</span>
                    </li>
                      <li class="list">
                        <a class="react" href="">全城</a>
                        <span class="iconfont xiala2">&#xe61e;</span>
                    </li>
                      <li class="list">
                        <a class="react" href="">默认排序</a>
                        <span class="iconfont xiala2">&#xe61e;</span>
                    </li>
                      <li class="list">
                       <a class="react" href="">筛选</a>
                        <span class="iconfont xiala2">&#xe61e;</span>
                    </li>
                </ul>
           
        </div>
    
</div>
</template>
<script>
export default {
    name:"HairTop.vue"
}
</script>
<style scoped>
.top{
width: 100%;  
display: block;

}
.img-box{
  position: relative;
    display: block;
    width: 100%;
    object-fit: cover;
}
.nav-bar {
    width: 100%;
    position: relative;
    z-index: 30;


}
.toplist{
    background: white;
    width: 100%;
    overflow: hidden;
    list-style-type: none;
}
.list{
    font-size: 15px;
    width: 25%;
    float: left;
    line-height: .88rem;
     display: inline-block;
     border-top: 1px solid #B7B7B7;
    border-left: 1px solid #B7B7B7;
    margin-left: -1px;
    border-bottom: 1px solid #B7B7B7;
    height: .88rem;
}
.react{
    
    color: inherit;
   float: left;
    text-decoration: none;
  
   
}
.iconfont xiala2{
   float: left;
  
}
</style>
